
<template>
  <div>
    <div class="search">
      <div class="search-bar">
        <van-search
          v-model="value"
          shape="round"
          background="#4fc08d"
          placeholder="请输入商品名称"
          style="
            z-index: 99;
            position: fixed;
            width: 100%;
            padding-top: 14px;
            border-bottom: solid 1px grey;
          "
        />

        <div class="search-bar-icon"></div>
      </div>
    </div>
    <div style="height: 59px"></div>
    <div>
      <div class="row">
        <div class="col-3 pr-0">
          <!-- <van-sidebar class="nav" id="v-pills-tab" aria-orientation="vertical">
            <van-sidebar-item
              title="推荐"
              class="nav-link active"
              id="v-pills-home-tab"
              data-toggle="pill"
              href="#v-pills-home"
              role="tab"
              aria-controls="v-pills-home"
              aria-selected="true"
            />
            <van-sidebar-item
              title="标签名称"
              class="nav-link"
              id="v-pills-profile-tab"
              data-toggle="pill"
              href="#v-pills-profile"
              role="tab"
              aria-controls="v-pills-profile"
              aria-selected="false"
            />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="标签名称" />
            <van-sidebar-item title="1" />
            <van-sidebar-item title="结尾" />

            <van-sidebar-item title="结尾" /> <van-sidebar-item title="结尾" />
          </van-sidebar> -->

          <div
            class="nav van-sidebar"
            id="v-pills-tab"
            role="tablist"
            aria-orientation="vertical"
            style="overflow: auto"
          >
            <a
              class="van-sidebar-item nav-link active"
              id="v-pills-home-tab"
              data-toggle="pill"
              href="#v-pills-home"
              role="tab"
              aria-controls="v-pills-home"
              aria-selected="true"
              ><div id="one">HOme</div></a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-profile-tab"
              data-toggle="pill"
              href="#v-pills-profile"
              role="tab"
              aria-controls="v-pills-profile"
              aria-selected="false"
              >Profile</a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >Messages</a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >Messages</a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >Messages</a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >Messages</a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >Messages</a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >Messages</a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >Messages</a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >Messages</a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >Messages</a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >Messages</a
            >
            <a
              class="nav-link van-sidebar-item"
              id="v-pills-messages-tab"
              data-toggle="pill"
              href="#v-pills-messages"
              role="tab"
              aria-controls="v-pills-messages"
              aria-selected="false"
              >1</a
            >
          </div>
        </div>
        <div class="col-9">
          <div
            class="tab-content"
            id="v-pills-tabContent"
            style="overflow: auto"
          >
            <div
              class="tab-pane fade show active"
              id="v-pills-home"
              role="tabpanel"
              aria-labelledby="v-pills-home-tab"
            >
              <ListOne></ListOne>
            </div>
            <div
              class="tab-pane fade"
              id="v-pills-profile"
              role="tabpanel"
              aria-labelledby="v-pills-profile-tab"
            >
              <ListTwo></ListTwo>
            </div>
            <div
              class="tab-pane fade"
              id="v-pills-messages"
              role="tabpanel"
              aria-labelledby="v-pills-messages-tab"
            >
              ...
            </div>
            <div
              class="tab-pane fade"
              id="v-pills-settings"
              role="tabpanel"
              aria-labelledby="v-pills-settings-tab"
            >
              ...
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ListOne from "../components/MenuView/ListOne.vue";
import ListTwo from "../components/MenuView/ListTwo.vue";

export default {
  data() {
    return {
      active: 0,
    };
  },
  components: {
    ListOne,
    ListTwo,
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.van-sidebar-item {
  font-size: 18px;
  width: 100%;
  float: right;
}
.van-sidebar {
  z-index: 99;
  width: 28%;
  position: fixed;
  height: 85%;
  float: right;
}

// .menulist {
//   padding-left: 0px;
//   width: 100%;
//   float: right;
//   position: fixed;
// }
.tab-content {
  width: 75%;
  position: fixed;
  height: 85%;
}
.van-sidebar-item {
  border-left: 4px solid rgba(247, 248, 250, 1);
}
.van-sidebar-item:hover {
  color: #3cb963;
}
.van-sidebar-item:focus {
  background-color: #fff;
  border-left: 4px solid #3cb963;
}
</style>